<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>带进度条拖拽式文件上传系统</title>
		<meta name="keywords" content="带进度条,拖拽式,文件,上传,系统">
		<meta name="description" content="带进度条拖拽式文件上传系统">
		<%@ include file="public/head.jspf"%>
		<style type="text/css">
			.box{width:900px;}
			.box .content{width:880px;min-height:300px;margin:0 auto;border:1px solid #ccc;border-radius:5px;box-shadow:1px 1px 10px #eee;overflow:hidden;}
			#data{min-height:300px;}
			.box .content .text{font-size:20px;color:#ddd;text-indent:16px;}
			.box .content .preview{width:250px;height:210px;background:#fff;margin:20px;position:relative;float:left;}
			.box .content .preview img{width:244px;height:204px;border:3px solid #ccc;border-radius:5px;display:block;}
			.box .content .preview .imgHolder{width:100%;height:100%;background:rgba(20,20,20,.4);position:absolute;top:0;left:0;display:block;}
			.box .content .preview .imgHolder i{width:80px;height:80px;background:rgba(20,20,20,.8);border-radius:50%;
				font:bold 80px/1 "微软雅黑";color:rgba(20,200,20,.8);text-align:center;position:absolute;top:calc(50% - 40px);left:calc(50% - 40px);display:none;}
			.box .content .preview .progressHolder{width:100%;height:12px;background:rgba(20,20,20,.8);margin-top:5px;border-radius:5px;}
			.box .content .preview .progressHolder .progress{width:0;height:12px;background:rgba(20,200,20,.8);border-radius:5px;position:absolute;left:0;transition:all 1s ease;}
			.box .content .done .imgHolder i{display:block;}
			.box .content .done .progress{width:100% !important;}
		</style>
	</head>
	<body>
		<div class="box">
			<h1>带进度条拖拽式文件上传系统<a class="back">返回</a></h1>
			<div class="content">
				<div id="data">
					<div class="text">请拖拽图片至此位置……</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery.filedrop.js"></script>
		<script type="text/javascript">
			$(function() {
			    var data = $("#data");
			    data.filedrop({
					maxfiles : 4,
					maxfilesize : 2,
					url : "upload",
					// 上传前执行的方法
					beforeEach : function(file) {
					    if (!file.type.match(/^\image\//)) {
							alert("只支持图片格式");
							return false;
					    }
					},
					// 上传开始后执行的方法
					uploadStarted : function(i, file, length) {
					    createImg(file);
					},
					// 进度更新时执行的方法
					progressUpdate : function(i, file, progress) {
					    $.data(file).find(".progress").width(progress);
					},
					// 上传结束后执行的方法
					uploadFinished : function(i, file, response) {
					    $(".text").html("");
					    $.data(file).addClass("done");
					}
				});
			    var template = "<div class='preview'>" + "<img />"
				    + "<span class='imgHolder'><i>✔</i></span>"
				    + "<div class='progressHolder'>"
				    + "<div class='progress'>"
				    + "</div>" + "</div>" + "</div>";
			    // 插入预览图片
			    function createImg(file) {
					var preview = $(template);
					var image = $("img", preview);
					var reader = new FileReader(); // 读取一张图片，js里面内置的对象
					reader.onload = function(e) { // 数据读取完成后触发事件
					    image.attr("src", e.target.result); // 把图片文件转成base64编码
					}
					reader.readAsDataURL(file); // 转成data格式的url
					data.append(preview); // 添加到页面上
					$.data(file, preview); // 附加数据
				}
			});
	    </script>
	</body>
</html>